<template>
  <div class="pp-container">
    <el-scrollbar class="center-scrollbar">
      <div v-show="processNode1.length" class="processBox">
        <div
          v-for="(item, index) in processNode1"
          :key="index"
          class="inlineBlock"
          :class="reClass('top', index, processNode1.length, item)"
        >
          <el-tooltip
            v-if="isEdit"
            content="Bottom center"
            placement="top"
            popper-class="atooltip atooltipJk"
          >
            <div slot="content">
              <el-row class="fontSizi16">
                <el-col
                  :span="16"
                ><div class="grid-left">{{ item.serviceName }}</div></el-col>
                <el-col
                  :span="8"
                ><div class="grid-right textRight">
                  <el-button
                    v-hasPermi="['console:hessNode:edit']"
                    type="primary"
                    :disabled="isServerImp"
                    plain
                    size="mini"
                    @click="switchTypeFn(item)"
                  >{{ item.checkStatus == 1 ? "停止" : "启动" }}</el-button>
                </div>
                </el-col>
              </el-row>
            </div>
            <div class="processNode processCur">
              {{ item.serviceName }}
            </div>
          </el-tooltip>
          <div v-else class="processNode bgColor">
            {{ item.serviceName }}
          </div>
        </div>
      </div>

      <div v-show="processNode2.length" class="processBox">
        <div
          v-for="(item, index) in processNode2"
          :key="index"
          class="inlineBlock"
          :class="reClass('middle', index, processNode2.length, item)"
        >
          <el-tooltip
            v-if="isEdit"
            content="Bottom center"
            placement="top"
            popper-class="atooltip atooltipJk"
          >
            <div slot="content">
              <el-row class="fontSizi16">
                <el-col
                  :span="16"
                ><div class="grid-left">{{ item.serviceName }}</div></el-col>
                <el-col
                  :span="8"
                ><div class="grid-right textRight">
                  <el-button
                    v-hasPermi="['console:hessNode:edit']"
                    type="primary"
                    plain
                    size="mini"
                    :disabled="isServerImp"
                    @click="switchTypeFn(item)"
                  >{{ item.checkStatus == 1 ? "停止" : "启动" }}</el-button>
                </div>
                </el-col>
              </el-row>
            </div>
            <div class="processNode processCur">
              {{ item.serviceName }}
            </div>
          </el-tooltip>
          <div v-else class="processNode bgColor">
            {{ item.serviceName }}
          </div>
        </div>
      </div>

      <div v-show="processNode3.length" class="processBox">
        <div
          v-for="(item, index) in processNode3"
          :key="index"
          class="inlineBlock"
          :class="reClass('bot', index, processNode3.length, item)"
        >
          <el-tooltip
            v-if="isEdit"
            content="Bottom center"
            placement="top"
            popper-class="atooltip atooltipJk"
          >
            <div slot="content">
              <el-row class="fontSizi16">
                <el-col
                  :span="16"
                ><div class="grid-left">{{ item.serviceName }}</div></el-col>
                <el-col
                  :span="8"
                ><div class="grid-right textRight">
                  <el-button
                    v-hasPermi="['console:hessNode:edit']"
                    type="primary"
                    plain
                    size="mini"
                    :disabled="isServerImp"
                    @click="switchTypeFn(item)"
                  >{{ item.checkStatus == 1 ? "停止" : "启动" }}</el-button>
                </div>
                </el-col>
              </el-row>
            </div>
            <div class="processNode processCur">
              {{ item.serviceName }}
            </div>
          </el-tooltip>
          <div v-else class="processNode bgColor">
            {{ item.serviceName }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { operatingService } from '@/api/console/group'
export default {
  props: {
    serviceConfigurations: Array,
    isEdit: Boolean,
    isLondingAni: Boolean,
    isServerImp: Boolean
  },
  data() {
    return {
      processNode1: [],
      processNode2: [],
      processNode3: [],
      securityServices: []
    }
  },
  mounted() {
    // console.log(this.$props)
    this.securityServices = this.$props.serviceConfigurations
    this.initData()
  },
  methods: {
    switchTypeFn(item) {
      var checkstatus = item.checkStatus ? '停止服务' : '开始启动'
      this.$confirm('是否确定执行 ‘' + checkstatus + '’ 的操作?', checkstatus, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        operatingService({
          checkStatus: item.checkStatus ? '0' : '1',
          nodeId: item.nodeId,
          id: item.serviceId
        }).then((response) => {
          this.msgSuccess(checkstatus + '中，请稍后')
        })
      })

      // console.log(item);
    },
    initData() {
      if (this.securityServices == undefined) {
        console.error('服务列表为undefind')
        return
      }

      this.securityServices.map((item) => {
        // if (item.serviceLevelFirst == 1) {
        // }
        this.processNode1.push(item)

        // if (item.serviceLevelFirst == 2) {
        //   this.processNode2.push(item)
        // }

        // if (item.serviceLevelFirst == 3) {
        //   this.processNode3.push(item)
        // }
      })

      this.arrSort(this.processNode1)
      this.arrSort(this.processNode2)
      this.arrSort(this.processNode3)

      this.$nextTick(function() {
        const dom = document.getElementsByClassName('el-scrollbar__wrap')[0]
        dom.style.marginRight = '-16px'
        dom.style.marginBottom = '-16px'
      })
      // console.log(this.processNode1)
    },
    arrSort(newarr) {
      /**  冒泡法排序
       * 插入发排序，即那数组的前一项和后一项对比，如果前面一项小于后面
       * 一项，则将两者位置互换，从数组第1个元素开始对比；如下示例
       */
      if (newarr.length < 2) {
        return newarr
      }

      for (let i = 0; i < newarr.length; i++) {
        for (let j = 0; j < newarr.length; j++) {
          if (newarr[j + 1]) {
            if (
              newarr[j].serviceLevelSecond > newarr[j + 1].serviceLevelSecond
            ) {
              const pre = newarr[j]
              newarr[j] = newarr[j + 1]
              newarr[j + 1] = pre
            }
          }
        }
      }
      return newarr
    },
    // 计算返回class
    reClass(type, index, len, item) {
      let className = ''
      let bgColor = ''
      if (item.checkStatus == false) {
        bgColor = 'grayBg'
      } else {
        bgColor = 'greenBg'
      }
      if (type == 'middle' && this.processNode3.length == 0) {
        type = 'bot'
      }

      if (type != 'bot') {
        if (this.processNode2.length == 0) {
          if (index == 0 && index == len - 1) {
            className = ''
          } else if (index != 0 && index == len - 1) {
            className = ''
          } else {
            className = 'topOneLeft'
          }
        }

        if (index == 0 && len == 1 && this.processNode2.length == 0) {
          className = ''
        } else if (
          index == 0 &&
          index != len - 1 &&
          this.processNode2.length != 0
        ) {
          className = 'topFrist'
        } else if (
          index == 0 &&
          index == len - 1 &&
          this.processNode2.length != 0
        ) {
          className = 'topFristEnd'
        } else if (
          index != 0 &&
          index == len - 1 &&
          this.processNode2.length != 0
        ) {
          className = 'topEnd'
        } else if (this.processNode2.length != 0) {
          className = 'topMiddle'
        }
      } else {
        if (index == 0 && index != len - 1) {
          className = 'lastFrist'
        } else if (index > 0 && index != len - 1) {
          className = 'lastFrist'
        } else if (index == 0 && index == len - 1) {
          className = 'lastFristEnd'
        } else if (index != 0 && index == len - 1) {
          className = 'lastEnd'
        }
      }

      return className + ' ' + bgColor

      //       if (type == "top") {
      //
      //
      //         if (index == 0 && index != len - 1) {
      //           className = "topFrist";
      //         } else if (index == 0 && index == len - 1 && this.processNode2.length) {
      //           className = "topFristEnd";
      //         } else if (index == 0 && index == len - 1 && this.processNode2.length == 0) {
      //           className = "";
      //         } else if (index != 0 && index == len - 1) {
      //           className = "topEnd";
      //         } else {
      //           className = "topMiddle"
      //         }
      //
      // 		if (this.processNode2.length == 0) {
      // 			if (index == 0 && index == len - 1) {
      // 				className = "";
      // 			} else if (index != 0 && index == len - 1) {
      // 				className = "";
      // 			} else {
      // 				className = "topOneLeft";
      // 			}
      // 		}
      //       } else if (type == "middle") {
      //         if (index == 0 && index == len - 1) {
      //           className = "";
      //         } else if (index != 0 && index == len - 1) {
      //           className = "";
      //         } else {
      //           className = "topOneLeft";
      //         }
      //       } else if (type == "bot") {
      //         if (index == 0 && index != len - 1) {
      //           className = "botFrist";
      //         } else if (index == 0 && index == len - 1) {
      //           className = "botFristEnd";
      //         } else if (index != 0 && index == len - 1) {
      //           className = "botEnd";
      //         } else {
      //           className = "botMiddle"
      //         }
      //       }
      //
      //
      //       return className + " " + bgColor;
    }
  }
}
</script>
<style></style>
<style scoped>
.center-scrollbar,
.left-scrollbar {
  height: calc(100% - 42px);
  overflow: hidden;
  padding-left: 10px;
  border: 0px;
}
.fontSizi16 {
  font-size: 15px;
}
.fontSizi16 .grid-left {
  width: 110px;
  text-wrap: none;
  padding-bottom: 6px;
}

.fontSizi16 .grid-right {
  width: 46px;
  margin-left: 4px;
  text-wrap: none;
}
</style>
<style scoped lang="scss">
/********* 流程css ****************/
.processBox {
  white-space: nowrap;
}

.contentBox {
  padding: 10px;
  font-size: 16px;
}

.contentBox .grid-left {
}

.contentBox .grid-right {
  width: auto;
  margin-bottom: 10px;
}

.contentBox .textRight {
  text-align: right;
}

.pp-container .center-scrollbar,
.left-scrollbar {
  height: calc(100% - 42px);
  overflow: hidden;
  padding-left: 10px;
  border: 0px;
}
.processNode {
  display: inline-block;
  height: 30px;
  width: 105px;
  line-height: 30px;
  text-align: center;
  background-color: #b2daff;
  border-radius: 5px;
  margin-right: 63px;
  margin-bottom: 65px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 10px;
  text-overflow: ellipsis;

  position: relative;
}

.processCur {
  cursor: pointer;
}
.processBox .greenBg .bgColor {
  background-color: #8ec2f2;
}

.grayBg .processNode {
  background-color: #eaeaea;
}
.greenBg .processNode {
  background-color: #4caf50;
  color: #ffffff;
}

.processNode .el-icon-close {
  position: absolute;
  top: 3px;
  left: 130px;
}

.botAddBtn {
  margin-left: 10px;
}
.inlineBlock {
  display: inline-block;
  position: relative;
}

.inlineBlock::after {
  content: "";
  display: inline-block;
  height: 60px;
  position: absolute;
  background-size: cover;
}

.inlineBlock::before {
  content: "";
  display: inline-block;
  height: 60px;
  position: absolute;
  background-size: cover;
}

.topFrist::after {
  width: 200px;
  top: 33px;
  left: -25px;
  background-image: url(../../../assets/images/step/bottom011.png);
}

.topFrist::before,
.topMiddle::before,
.botFrist::before,
.botMiddle::before,
.topOneLeft::before,
.lastFrist::before {
  width: 100px;
  top: -15px;
  left: 70px;
  background-size: cover;
  background-image: url(../../../assets/images/step/left.png);
}

.topFristEnd::after {
  width: 200px;
  top: 33px;
  left: -46px;
  background-image: url(../../../assets/images/step/bottom01.png);
}
.topEnd::after {
  width: 200px;
  top: 31px;
  left: -65px;
  background-image: url(../../../assets/images/step/end01.png);
}
.topMiddle::after {
  width: 250px;
  top: 30px;
  left: -70px;
  background-image: url(../../../assets/images/step/bottom031.png);
}

.lastFrist::after {
  // 	width: 200px;
  // 	top: 33px;
  // 	left: -46px;
  // 	background-image: url(../../../assets/images/step/bottom01.png);
}

.botFrist::after {
  width: 200px;
  top: -63px;
  left: -25px;
  background-image: url(../../../assets/images/step/top011.png);
}

.botFristEnd::after {
  width: 200px;
  top: -60px;
  left: -46px;
  background-image: url(../../../assets/images/step/top01.png);
}
.botEnd::after {
  width: 200px;
  top: -60px;
  left: -50px;
  background-image: url(../../../assets/images/step/botend01.png);
}

.botMiddle::after {
  width: 250px;
  top: -60px;
  left: -50px;
  background-image: url(../../../assets/images/step/top031.png);
}
</style>
